<template>
  <div class='profile-container'>
    <!-- 导航栏 -->
    <van-nav-bar title="个人信息" id="page-nav-bar" left-arrow @click-left="$router.back()" />
    <!-- 头像file表单 -->
    <!-- onchange 属性在元素值改变时触发 -->
    <input type="file" ref="file" hidden @change="onFileChange">
    <!-- 个人中心 -->
    <van-cell title="头像" is-link @click="$refs.file.click()">
      <van-image class="avatar" fit="cover" :src="user.photo" round />
    </van-cell>
    <van-cell title="昵称" :value="user.name" is-link @click="isShowName = true" />
    <van-cell title="性别" :value="user.gender === 1 ? '女' : '男'" is-link
      @click="isShowGender = true" />
    <van-cell title="生日" :value="user.birthday" is-link @click="isShowBirthday = true" />
    <!-- 编辑昵称弹出层 -->
    <van-popup v-model="isShowName" position="bottom" :style="{ height: '100%' }">
      <update-name v-model="user.name" v-if="isShowName" @close="isShowName = false" />
    </van-popup>
    <!-- 编辑性别弹出层 -->
    <van-popup v-model="isShowGender" position="bottom">
      <update-gender v-model="user.gender" v-if="isShowGender" @close="isShowGender = false" />
    </van-popup>
    <!-- 编辑生日弹出层 -->
    <van-popup v-model="isShowBirthday" position="bottom">
      <update-birthday v-model="user.birthday" v-if="isShowBirthday"
        @close="isShowBirthday = false" />
    </van-popup>
    <!-- 编辑头像弹出层 -->
    <van-popup v-model="isShowAvator" position="bottom" :style="{ height: '100%' }">
      <update-avator v-if="isShowAvator" :img="imgURL" @cancel="isShowAvator = false" @update-avator="user.photo = $event"/>
    </van-popup>
  </div>
</template>
<script>
import { getUserProfile } from '@/api/user';
import UpdateName from './components/update-name.vue';
import UpdateGender from './components/update-gender.vue';
import UpdateBirthday from './components/update-birthday.vue';
import UpdateAvator from './components/update-avator.vue';
export default {
  name: 'ProfilePage',
  components: {
    UpdateName,
    UpdateGender,
    UpdateBirthday,
    UpdateAvator,
  },
  props: {},
  data() {
    return {
      user: {},
      isShowName: false, // 展示昵称弹出层
      isShowGender: false, // 展示性别弹出层
      isShowBirthday: false, // 展示生日弹出层
      isShowAvator: false, // 展示头像弹出层
      imgURL: '', // 头像url
    };
  },
  created() {
    this.onLoadUserProfile();
  },
  computed: {},
  methods: {
    onFileChange() {
      // 1.获取文件对象
      console.log(this.$refs.file.files[0]);
      const file = this.$refs.file.files[0];
      // 2.基于文件对象获取 blob 数据
      const data = window.URL.createObjectURL(file);
      console.log(data);
      // 3.赋值
      this.imgURL = data;
      this.isShowAvator = true;
    },
    onLoadUserProfile() {
      getUserProfile()
        .then((res) => {
          console.log(res);
          this.user = res;
        })
        .catch((err) => {
          this.$toast(err || '数据请求失败！请稍后重试');
        });
    },
  },
};
</script>
<style lang='less' scoped>
.profile-container {
  .avatar {
    width: 45px;
    height: 45px;
  }
  .van-popup {
    background-color: #f5f7f9;
  }
}
</style>
